<template>
<div>
    <div style="margin-bottom: 20px;">
      <el-form :inline="true" :model="query" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="query.userName" placeholder="请输入姓名" clearable />
        </el-form-item>
        <el-form-item label="届数">
          <el-input v-model="query.edition" placeholder="请输入届数" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getData">查询</el-button>
        </el-form-item>

        <div>
          <el-button type="primary" @click="add">添加理事会成员</el-button>
        </div>
      </el-form>
    </div>
    <div>
        <el-table :data="tableData" border stripe style="width: 100%">
            <el-table-column prop="id" label="ID" />
            <el-table-column prop="edition" label="届数" />
            <el-table-column prop="unitPosition" label="任职单位职务与职称" min-width="120" />
            <el-table-column prop="sort" label="排序" />
            <el-table-column prop="userName" label="姓名" />
            <el-table-column prop="avatar" label="头像">
                <template #default="{ row }">
                <img @click="previewAvatar(row.avatar)" :src="imgUrl(row.avatar)" class="avatar" />
                </template>
            </el-table-column>
            <el-table-column prop="workUnit" label="工作单位" min-width="120" />
            <el-table-column prop="status" label="状态">
                <template #default="{ row }">
                <el-tag :type="row.status === 1 ? 'success' : 'danger'">
                    {{ row.status === 1 ? '可用' : '禁用' }}
                </el-tag>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="120">
                <template #default="{ row }">
                <el-button link type="primary" size="small" @click="edit(row)">编辑</el-button>
                <el-button link type="primary" size="small" @click="del(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="demo-pagination-block" style="margin-top: 20px;">
            <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[5, 10, 15, 20]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
        </div>
    </div>
    <association-council-form ref="councilForm" @refresh="refresh" />
</div>
</template>
<script setup>
import { ref, useTemplateRef, computed} from 'vue';
import {getAssociationCouncil, deleteAssociationCouncil} from '../../../api/guild/associationCouncil'
import AssociationCouncilForm from './AssociationCouncilForm.vue';
import {ElMessage, ElMessageBox} from "element-plus";
import {confirm} from '../../../api/common/common'

const pageNo = ref(1)
const pageSize = ref(5)
const total = ref(0)
const tableData = ref([])
let query = ref({
  pageNo: pageNo.value,
  pageSize: pageSize.value,
  userName:'',
  edition:'',
})

let councilForm = useTemplateRef('councilForm')
//显示数据
async function getData(){
    query.value.pageNo = pageNo.value
    query.value.pageSize = pageSize.value
    let res=await getAssociationCouncil(query.value)
    console.log('res',res);
    tableData.value=res.data.list
    total.value=res.data.total
}
function handleCurrentChange(){
    getData()
}
function handleSizeChange(){
    getData()
}
//新增
function add(){
    councilForm.value.add()
}
//更新
function refresh(){
    getData()
}
//编辑
function edit(row){
    councilForm.value.edit(row)
}
//删除
async function del(row){
  try {
    let flag = await confirm("确认要删除吗?")
    if (flag){
      let result = await deleteAssociationCouncil(row.id)
      ElMessage.success(result.data)
      getData()
    }
  } catch (e) {
    console.log(e)
    ElMessage.error(e.message)
  }
}
let imgUrl = computed(()=>{
  return v=>{
    if (v.startsWith('http://') || v.startsWith('https://')){
      return v
    }
    return "/api/common/download/"+v
  }
})
//预览图片
function previewAvatar(avatarUrl){
  if (!(avatarUrl.startsWith('http://') || avatarUrl.startsWith('https://'))){
    avatarUrl = "/api/common/download/"+avatarUrl
  }

  // avatarUrl = (avatarUrl.startsWith('http://') || avatarUrl.startsWith('https://')) ? avatarUrl : 'http://localhost:8080/rbac/common/download/' + avatarUrl;
  ElMessageBox.alert(
      `<img src="${avatarUrl}" style="max-width: 100%; max-height: 400px;" />`,
      '头像预览',
      {
        dangerouslyUseHTMLString: true,
        showConfirmButton: false,
        showCancelButton: true,
        cancelButtonText: '关闭',
      }
  );
}
getData()
</script>
<style scoped>
.avatar{
  width: 50px;
  height: 50px;
  display: block;
}
</style>